<!--
 * 撰写窗口组件
 *
 * @author Junpeng.Li
 * @date 2022-04-10 23:04
 *
 * 自定义事件：
 *   - 无
-->
<template>
    <div class="terminal" :style="{
        height: `${height - 1}px`
    }">
        <div class="__title">
            <div class="__block">
                {{ title }}
            </div>

            <div class="__block __tool">
                <el-select v-model="mode" placeholder="请选择"
                           style="width: 120px;">
                    <el-option
                            v-for="item in [{
                                value: SEND_MODE.SINGLE,
                                label: '当前会话'
                            }, {
                                value: SEND_MODE.ALL,
                                label: '全部会话'
                            }]"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>

        </div>

        <el-input
                class="textarea"
                type="textarea"
                :rows="7"
                resize="none"
                v-model="text"
                @keyup.enter.native="onSend"
        />
    </div>
</template>

<script>

    import {getSettings, setSettings} from "@/api/compile"

    /**
     * 发送模式
     */
    const SEND_MODE = {
        // 当前会话
        SINGLE: 'single',

        // 全部会话
        ALL: 'all'
    }

    export default {
        name: "compile",

        props: {

            /**
             * 标题
             */
            title: {
                type: String,
                default: () => '撰写'
            },

            /**
             * 会话的终端列表
             */
            terminals: {
                type: Array,
                default: () => []
            },

            /**
             * 被激活的终端在终端列表的索引
             */
            index: {
                type: Number,
                default: () => -1
            }

        },

        data() {
            return {
                // 组件高度, 单位: px
                height: 200,

                text: '',

                mode: SEND_MODE.SINGLE,

                SEND_MODE
            }
        },

        watch: {

            mode(val) {
                setSettings('mode', val)
            }

        },

        mounted() {
            this.mode = getSettings().mode
        },

        methods: {

            /**
             * 获取组件的高度
             *
             * @returns {number} 组件的高度, 单位: px
             */
            getHeight() {
                return this.height
            },

            /**
             * 将当前输入的文本发送给终端
             */
            onSend() {
                if (!this.text) {
                    return
                }

                // 发送给当前会话
                if (this.mode === SEND_MODE.SINGLE) {
                    this.terminals[this.index].addText(this.text)
                } else {
                    this.terminals.forEach(terminal => {
                        terminal.addText(this.text)
                    })
                }

                this.text = ''
            }
        }
    }
</script>

<style scoped lang="scss">

    .terminal {
        width: calc(100% - 20px);
        border-top: 1px solid #DCDFE6;
        padding: 0 10px;
        background-color: #eee;

        .__title {
            font-size: 18px;
            height: 40px;
            line-height: 40px;
            color: #303133;

            .__block {
                float: left;
            }

            .__tool {
                font-size: 14px;
                margin-left: 20px;
            }
        }

        .textarea > > > textarea {
            color: #fff;
            background-color: #000;
        }
    }


</style>
